<template>

  <van-uploader class="all" :max-count="1" :deletable="deletable" v-model="files1" :upload-text="text" :after-read="afterRead">

  </van-uploader>
</template>

<script>
  import {
    SystemService
  } from '@/api'
  export default {
    name: 'uploader',
    model: {
      prop: 'file',
      event: 'hasUpload'
    },
    props: {
      deletable: {
        type: Boolean,
        default: true
      },
      text: {
        type: String,
        default: ''
      },
      file: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        files1: []
      }
    },
    watch: {
      file: {
        handler(newValue) {
          if(this.files1.length > 0 ) {
            this.files1[0].url = newValue
          }else if (newValue){
            this.files1.push({url:newValue});
          }
          // this.$set(this.files1[0],'url',newValue)
        },
        immediate: true,
        deep: true,
      }
    },
    methods: {
      afterRead(file) {
        console.log(file)
        var data = new FormData();
        data.append("image[]", file.file);
        SystemService.upload(data).then(res => {
          console.log(res)
          // this.files1[0].url = res.data[0];
          console.log('forns: ' + this.files1[0].url)
          console.log('after: ' + res.data[0])
          this.$emit('hasUpload', res.data[0])
        })
      }
    },
  }
</script>

<style lang="less" scoped>
  .all {
    width: 100%;
    height: 100%;

    /deep/.van-uploader__wrapper {
      width: 100%;
      height: 100%;
    }

    /deep/.van-uploader__preview {
      width: 100%;
      height: 100%;

    }

    /deep/.van-uploader__file {
      width: 100%;
      height: 100%;

    }

    /deep/.van-uploader__upload {
      width: 100%;
      height: 100%;
    }

    /deep/.van-image {
      width: 100%;
      height: 100%;
    }

    /deep/.van-image__img {
      width: 100%;
      height: 100%;
    }
  }
</style>